{% extends 'template/base.html' %}

{% block head %}
    {{ super() }}
    <title>订单详情</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/ystep/css/ystep.css') }}">
    <script src="{{ url_for('static', filename='lib/ystep/js/ystep.js') }}"></script>
{% endblock %}

{% block body %}
    {% include 'template/user-header.html' %}

    <style>
        .container {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

        .pd-img {
            height: 300px;
            width: 300px;
            margin-right: 40px;
        }

        td {
            padding: 1px 10px;
            text-align: left;
        }

        td:first-child {
            text-align: right;
        }
    </style>
    <div style="margin-top: 40px;font-size: 30px">订单详情 - <span class="text-danger">{{ order.status_text }}</span></div>

    <div clsss=".ystep1"></div>

    <div class="ystep" style="margin-top: 30px">
        <script>
          $(function () {
            $('.ystep').loadStep({
              size: 'large',
              color: 'blue',
              steps: [{
                title: '下单',
                content: '{{ order.create_time | d('请耐心等待', true)  }}'
              }, {
                title: '付款',
                content: '{{ order.pay_time | d('请耐心等待', true)  }}'
              }, {
                title: '发货',
                content: '{{ order.send_package_time | d('请耐心等待', true)  }}'
              }, {
                title: '配送',
                content: '公司发货后，请耐心等待你的包裹'
              }, {
                title: '成交',
                content: '{{ order.finish_time | d('请耐心等待', true) }}'
              }]
            })
            $('.ystep').setStep({{ order.status + 2 }})
          })
        </script>
    </div>


    <div class="container">
        <img class="pd-img" src="{{ url_for('static', filename='upload/' + order.product_img) }}" alt="">
        <table border="0">
            <tr>
                <td>订单号：</td>
                <td>{{ order.id }}</td>
            </tr>
            <tr>
                <td>商品：</td>
                <td>
                    <a href="{{ url_for('web.product_item_ep', product_id=order.product_id) }}"
                       target="_blank">{{ order.product_name }}</a>
                </td>
            </tr>
            <tr>
                <td>单价：</td>
                <td>￥{{ order.single_price }}</td>
            </tr>
            <tr>
                <td>购买数量：</td>
                <td>{{ order.count }}</td>
            </tr>

            <tr>
                <td>总价：</td>
                <td>￥{{ order.total_price }}</td>
            </tr>

            <tr>
                <td>订单状态：</td>
                {% if order.status == 0 %}
                    <td class="text-danger"><span>待支付</span>
                        <button id="pay" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">
                            立即付款
                        </button>
                        <form style="display: inline-block;" action="{{ url_for('web.order_cancel_ep') }}"
                              onclick="return confirm('确认取消吗？')"
                              method="post">
                            <input type="text" hidden name="order_id" value="{{ order.id }}">
                            <button class="btn btn-danger">取消订单</button>
                        </form>
                    </td>
                {% endif %}

                {% if order.status == 1 %}
                    <td>待发货
                        <form style="display: inline-block;" action="{{ url_for('web.order_cancel_ep') }}"
                              onclick="return confirm('确认取消1吗？');"
                              method="post">
                            <input type="text" hidden name="order_id" value="{{ order.id }}">
                            <button class="btn btn-danger">申请退货</button>
                        </form>
                    </td>
                {% endif %}

                {% if order.status == 2 %}
                    <td>
                        <span>正在配送</span>
                        <form style="display: inline-block;" action="{{ url_for('web.order_finish_ep') }}"
                              onclick="return confirm('请确认您已经收到零食，确认收货后不可退款')" method="post">
                            <input type="text" hidden name="order_id" value="{{ order.id }}">
                            <button class="btn btn-success">确认收货</button>
                        </form>
                        <form style="display: inline-block;" action="{{ url_for('web.order_cancel_ep') }}"
                              onclick="return confirm('确认取消吗？')"
                              method="post">
                            <input type="text" hidden name="order_id" value="{{ order.id }}">
                            <button class="btn btn-danger">申请退货</button>
                        </form>

                    </td>

                {% endif %}

                {% if order.status == 3 %}
                    <td>已签收</td>
                {% endif %}

                {% if order.status == 4 %}
                    <td>已申请取消</td>
                {% endif %}

                {% if order.status == 5 %}
                    <td>订单已取消</td>
                {% endif %}

            </tr>

            <tr>
                <td>创建时间：</td>
                <td>{{ order.create_time }}</td>
            </tr>

            <tr>
                <td>付款时间：</td>
                <td>{{ order.pay_time | d('暂无', true) }}</td>
            </tr>

            <tr>
                <td>快递单号：</td>
                <td>{{ order.package_code | d('暂无', true) }}</td>
            </tr>

            <tr>
                <td>发货时间：</td>
                <td>{{ order.send_package_time | d('暂无', true) }}</td>
            </tr>

            <tr>
                <td>收货时间：</td>
                <td>{{ order.finish_time | d('暂无', true) }}</td>
            </tr>

            <tr>
                <td>收件人：</td>
                <td>{{ order.user_realname }}</td>
            </tr>

            <tr>
                <td>收件地址：</td>
                <td>{{ order.user_address }}</td>
            </tr>

            <tr>
                <td>联系电话：</td>
                <td>{{ order.user_tel }}</td>
            </tr>

        </table>


    </div>

    <div class="container">
        <a href="{{ url_for('web.order_list_ep') }}" class="btn btn-primary btn-block btn-lg" style="margin-top: 50px">查看全部订单</a>
    </div>


    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content"
                 style="margin-top: 40vh;width: 400px;height: 200px;display: flex;
                     flex-direction: column;align-items: center;justify-content: center;
                     position: relative"
            >
                <div style="position: absolute;top:20px;font-size: 20px">等待支付</div>
                <div>模拟等待支付</div>
            </div>
        </div>
    </div>
    <script>
      $(function () {


        $('#pay').click(function () {

          setTimeout(function () {

            $.post({
              url: '{{ url_for('web.pay_order_ep') }}',
              data: JSON.stringify({
                'order_id': '{{ order.id }}'
              }),
              dataType: 'text',
              contentType: 'application/json',
              success: function (res) {
                console.log(res)
                if (res === 'success') {
                  alert('支付成功')
                  location.reload()
                }
              },
              fail () {
                alert('支付失败')
                location.reload()
              }
            })

          }, 3000)

        })

      })
    </script>
{% endblock %}